<template>
	<div class="person-list">
		<van-nav-bar title="行业精英" left-arrow @click-left="back" />
		<div class="search">
			<label for="" @click="changType=!changType" style="font-size:0.22rem">
				{{changType?'行业':'姓名'}}
				<van-icon name="play" /></label>
			<input type="text" v-model="searchContent" style="font-size:0.22rem" placeholder="请输入关键字">
			<van-icon name="cross" @click="searchContent = ''" />
			<span @click="search" style="font-size:0.22rem">搜索</span>
		</div>
		<van-field readonly clickable label="行业" :value="value" placeholder="选择行业" @click="industryTag = true" />
		<van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="getList">
			<div class="service_list">
				<div class="lists">
					<router-link tag="div" :to="{path:`/person/${item.id}`}" @click="toDetail(item)" class="home_service__item flex van-hairline--bottom"
					 v-for="(item ,index) in dataList" :key="index">
						<div v-if="!item.imgFile" class="bg"></div>
						<div v-if="item.imgFile" class="bg" :class="['type1']" :style="{backgroundImage:`url(${item.imgFile.uriPath})`}"></div>
						<div class="infor">
							<h4 class="name">{{item.name}}</h4>
							<van-rate v-if="item.star" :value="item.star" />
							<p class="descp">{{item.industry}}行业，从业{{item.workYears}}</p>
							<p>{{item.empEnterprise}}</p>
							<p class="dark">手机号:{{item.phone}}</p>
						</div>
					</router-link>
				</div>
			</div>
		</van-list>
		<van-popup v-model="industryTag" position="bottom">
			<van-picker show-toolbar :columns="columns" @cancel="showPicker = false" @confirm="onConfirm" value-key="label" />
		</van-popup>
	</div>
</template>
<script>
	import api from 'api/api'
	import {
		mapState
	} from 'vuex'
	export default {
		data() {
			return {
				star:3,
				active: 0,
				loading: false,
				finished: false,
				industryTag: false,
				columns: ['杭州', '宁波', '温州', '嘉兴', '湖州'],
				value: '',
				form: {
					"appKey": "6772665683285921",
					"page": 0,
					"limit": 10,
					"data": {
						"name": "",
						"industry": ""
					}
				},
				changType: true,
				functions: [{
						name: '法律事务',
						regionId: '',
					},
					{
						name: '征信服务',
						regionId: '',
					},
					{
						name: '知识产权',
						regionId: '',
					},
					{
						name: '财税服务',
						regionId: '',
					},
					// { name: '中国黄页', regionId: '', },
					{
						name: '保险服务',
						regionId: '',
					},
					{
						name: '资质办理',
						regionId: '',
					},
					{
						name: 'Boss靓号',
						regionId: '',
					},
					{
						name: '行业精英',
						regionId: '',
					},
					// { name: '人才招聘', regionId: '', }
				],
				dataList: [],
				pages: 0,
				searchContent: ''
			}
		},
		computed: {
			...mapState(['categoryList'])
		},
		created() {
			this.getList()
		},
		methods: {
			onConfirm(value, index) {
				console.log(value[0], index[0])
				this.value = value[0];
				this.industryTag = false;
				this.form.page = 0
				this.form.data.industry = value[0]
				this.dataList = []
				this.getList()
			},
			sure(picker, value, index) {
				Toast(`当前值：${value}, 当前索引：${index}`);
			},
			move() {
				Toast('取消');
				this.industryTag = false
			},
			search() {
				this.changType ? this.form.data.industry = this.searchContent : this.form.data.name = this.searchContent
				this.changType ? this.form.data.name = '' : this.form.data.industry = ''
				this.form.page = 0
				this.dataList = []
				this.loading = false
				this.finished = false
				this.getList()
			},
			getList() {
				this.form.page++
				this.loading = true;
				api.getElitePage(this.form).then(res => {
					console.log('resss', res)
					this.loading = false;
					console.log(this.loading)
					this.dataList = this.dataList.concat(res.data.records)
					this.pages = res.data.pages
					console.log(this.form.data.page, this.total)
					if (this.form.page > this.pages - 1) {
						console.log(this.finished)
						this.finished = true
					}
				})
				api.dictIndustry().then(res => {
					// this.columns = res.data
					var str=[{'label':'全部','code':'','children':[]}]
					this.columns=str.concat(res.data)
					console.log('wwww',res.data)
				})
			},
			tabChange() {
				console.log(this.active)
				this.dataList = []
				this.form.data.page = 0
				this.loading = false
				this.finished = false
				this.getList()
			},
			toDetail(item) {
				console.log(item)
				
				this.$router.push('/service/good/' + item.id)
			},
			back() {
				console.log('fff')
				// return
				this.$router.push('/home')
				// window.history.go(-1)
			}
		}
	}
</script>

<style lang="scss">
	.person-list {
		.van-tabs__line {
			background-color: #348aff;
		}

		.search {
			width: 6.9rem;
			margin: 0.2rem auto;
			background-color: #f5f5f5;
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-size: 0.32rem;
			padding: 0.1rem 0.2rem;
			border-radius: 0.5rem;

			label {
				display: flex;
				align-items: center;

				i {
					transform: rotate(90deg);
				}
			}

			input {
				flex: auto;
				margin: 0 0 0 0.2rem;
				padding: 0.1rem 0.2rem;
				background: none;
			}

			span {
				margin-left: 0.2rem;
			}
		}

		.service_list {
			.lists {
				.home_service__item {
					width: 6.9rem;
					padding: 0.3rem;

					.bg {
						width: 2.5rem;
						height: 2.8rem;
						background-size: cover;
						background-position: center;
						background-color: #f5f5f5;
						flex: none;
						color: #111;
					}

					.infor {
						width: 5.02rem;
						text-align: left;
						padding: 0 0.2rem;
						font-size: 0.32rem;
						flex: auto;
						display: flex;
						flex-direction: column;
						justify-content: space-between;
						align-items: flex-start;

						h4 {
							margin-bottom: 0.2rem;
						}

						p {
							font-size: 0.28rem;
							line-height: 1.2;
							margin-top: 0.1rem;
						}

						.dark {
							color: #999;
						}
					}
				}
			}
		}
	}
</style>
